<template>
	<view class="followswiper" v-if="index">
		<view class="title-box">
			<view class="title" @click="slide=0" :style="slide == 0?'color:#ffffff;font-weight:bold;':''">关注
				{{followlist.length}}
			</view>
			<view class="title" @click="slide=1" :style="slide == 1?'color:#ffffff;font-weight:bold;':''">粉丝
				{{fanslist.length}}
			</view>
		</view>
		<view class="title-silde">
			<view class="slide" :style="slide == 0 ? 'left:5%;':'left:50%'"></view>
		</view>
		</swiper>
		<swiper class="swiper" @change="change" :current="slide">
			<swiper-item class="follow-content" v-if="followlist">
				<view class="search">
					<view class="search-content">
						<view class="search-icon iconfont icon-sousuo"></view>
						<input v-bind:value="search_text" @input="input" class="search-input" placeholder="搜索用户备注或名字" />
						<view class="clear iconfont icon-cuowuguanbiquxiao-yuankuang" @click="clear"
							v-show="search_text!=''"></view>
					</view>
				</view>
				<view class="follow-list" v-for="(item,index) in followlist" :key="index" v-show="search_text==''">
					<view class="follow-item">
						<view class="follow-box" @click="toFollow(item)">
							<image class="follow-avatar" :src="ip+'/img/'+item.avatar"></image>
							<view class="follow-name">{{item.userName}}</view>
						</view>
						<view class="followed" v-if="item.isfollowed">
							<view class="follow-text" v-if="!item.follow_each" @click="unFollow(index)">
								已关注
							</view>
							<view class="follow-text" v-else @click="showAction(index)">
								互相关注
							</view>
						</view>
						<view class="unfollowed" v-if="!item.isfollowed">
							<view class="unfollow-text" @click="doFollow(index)">
								回关
							</view>
						</view>
					</view>
				</view>
				<view class="input-list" v-for="(item, index) in inputlist" :key="index" v-show="search_text!=''">
					<view class="input-item">
						<view class="input-box">
							<image class="input-avatar" :src="ip+'/img/'+item.avatar"></image>
							<view class="input-name">{{item.userName}}</view>
						</view>
						<view class="followed">
							<view class="input-text" v-if="!item.follow_each">
								已关注
							</view>
							<view class="input-text" v-else>
								互相关注
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="fans-content" v-if="fanslist">
				<view class="fans-list" v-for="(item,index) in fanslist" :key="index">
					<view class="fans-item">
						<view class="fans-box">
							<image class="fans-avatar" :src="ip+'/img/'+item.avatar"></image>
							<view class="fans-name">{{item.userName}}</view>
						</view>
						<view class="fans-text-follow" v-if="!item.follow_each" @click="doFollow(index,'fans')">
							回关
						</view>
						<view class="fans-text" v-else @click="showAction(index,'fans')">
							互相关注
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import t from '../common/helper.js';

	export default {
		data() {
			return {
				ip: t.o,
				user: '',
				slide: 0, //当前swiper下标
				search_text: '',
				inputlist: [],
				followlist: '',
				fanslist: '',
			}
		},
		props: ['index'],
		created() {
			this.user = uni.getStorageSync('user')[0];
			this.getFollowList();
			this.getFansList();
			this.slide = this.index;
		},
		methods: {
			getFollowList() {
				uni.request({
					url: t.o+'/dofollow',
					data: {
						userId: this.user.userId,
					},
					success: res => {
						this.followlist = res.data.data;
					}
				})
			},
			getFansList() {
				uni.request({
					url: t.o+'/fans',
					data: {
						userId: this.user.userId,
					},
					success: res => {
						this.fanslist = res.data.data;
					}
				})
			},
			//轮播图改变
			change(e) {
				this.slide = e.detail.current;
			},
			//清除文字
			clear() {
				this.search_text = '';
				this.inputlist = [];
			},
			//输入框
			input(e) {
				this.inputlist = [];
				this.search_text = e.detail.value;
				this.followlist.forEach(item => {
					if (item.userName.includes(this.search_text)) {
						this.inputlist.push(item);
					}
				})
			},
			showAction(index,fans) {
				uni.showActionSheet({
					itemList: ['取消关注'],
					itemColor: '#fe2c55',
					success: res => {
						this.unFollow(index,fans);
					}
				})
			},
			//取消关注
			unFollow(index,fans) {
				const byfollower = fans ? this.fanslist[index].follower  : this.followlist[index].byfollower;
				const follower = fans ? this.fanslist[index].byfollower  : this.user.userId;
				uni.request({
					url: `${t.o}/dofollow`,
					method: 'DELETE',
					data: {
						byfollower,
						follower,
					},
					success: res => {
						if(fans) {
							this.$set(this.fanslist[index],'follow_each',false);
							this.getFollowList();
						}else {
							this.$set(this.followlist[index],'isfollowed',false);
							this.getFansList();
						}
					}
				})
			},
			//实现关注
			doFollow(index, fans) {
				const byfollower = fans ? this.fanslist[index].follower : this.followlist[index].byfollower;
				const follower = fans ? this.fanslist[index].byfollower : this.followlist[index].follower;
				uni.request({
					url: `${t.o}/dofollow`,
					method: 'POST',
					data: {
						byfollower,
						follower
					},
					success: res => {
						if(fans) {
							//粉丝列表
							this.$set(this.fanslist[index],'follow_each',true);
							this.getFollowList();
						}else {
							//关注列表
							this.$set(this.followlist[index],'isfollowed',true);
						}
					}
				})
			},
			
			// 前往用户页
			toFollow(user) {
				console.log(user.byfollower)
				uni.navigateTo({
					url: "/pagesA/user/user?userId=" + user.byfollower + "&isfollow=true",
				})
			}
		}
	}
</script>

<style lang="scss">
	.followswiper {
		width: 100%;
		height: calc(100% - 85px);

		.title-box {
			width: 100%;
			display: flex;
			font-size: 16px;
			align-items: center;
			justify-content: center;
			color: #87888e;

			.title {
				flex: 1;
				text-align: center;
				line-height: 46px;
			}
		}

		.title-silde {
			width: 100%;
			height: 2px;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				width: 100%;
				height: 1px;
				position: absolute;
				bottom: 0;
				background-color: #e6e6e7;
				transform: translateY(95%);
			}

			.slide {
				transition: all .5s;
				position: relative;
				height: 2px;
				width: 45%;
				border-radius: 3px;
				background-color: #FFFFFF;
			}
		}

		.swiper {
			width: 100%;
			height: calc(100% - 48px);

			.follow-content,
			.fans-content {
				.search {
					width: 100%;
					padding: 15px 20px;
					box-sizing: border-box;

					.search-content {
						width: 100%;
						height: 40px;
						border-radius: 2px;
						background-color: #333333;
						display: flex;
						align-items: center;

						.search-icon {
							font-size: 20px;
							margin-inline: 8px;
						}

						.search-input {
							flex: 1;
						}

						.clear {
							font-size: 16px;
							margin-inline: 8px;
						}
					}
				}

				.follow-list,
				.fans-list,
				.input-list {
					padding: 10px 20px;
					box-sizing: border-box;

					.follow-item,
					.fans-item,
					.input-item {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.follow-box,
						.fans-box,
						.input-box {
							display: flex;
							align-items: center;

							.follow-avatar,
							.fans-avatar,
							.input-avatar {
								width: 50px;
								height: 50px;
								border-radius: 50%;
							}

							.follow-name,
							.fans-name,
							.input-name {
								margin-left: 10px;
							}
						}

						.follow-text,
						.fans-text,
						.input-text {
							font-size: 14px;
							text-align: center;
							width: 85px;
							line-height: 30px;
							border-radius: 3px;
							border: 1px solid #e6e6e7;
						}
						.fans-text-follow, .unfollow-text {
							background-color: #fe2c55;
							font-size: 14px;
							text-align: center;
							width: 85px;
							line-height: 30px;
							border-radius: 3px;
						}
					}
				}
			}

			.fans-content {}
		}
	}
</style>
